<template>
  <div class="eval">
    <div class="score-wrap">
      <el-row>
        <el-col :span="12">
          <el-form-item label="项目开始时间：" label-width="153px">
            {{ evaluation.projectStartTime }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="项目结束时间：">
            {{ evaluation.projectEndTime }}
          </el-form-item>
        </el-col>
<!--        <el-col :span="12" style="margin-left: -15px">-->
<!--          <el-form-item label="服务评分：">-->
<!--            {{-->
<!--              evaluation.randomList[0] && evaluation.randomList[0].serviceScore-->
<!--            }}-->
<!--          </el-form-item>-->
<!--        </el-col>-->
      </el-row>
      <el-row> </el-row>
      <!--违规扣分-->
      <div v-if="evaluation.scoreindexList.length != 0">
        <span class="current-score"
          >当前扣分值：{{ evaluation.deduct }}分</span
        >
      </div>
      <div class="deduction-wrap" v-if="evaluation.scoreindexList.length != 0">
        <label><i class="must"></i>违规扣分：</label>
        <template v-for="(item, index) in evaluation.scoreindexList">
          <ul :key="index" style="margin-right: 20px">
            <li v-for="(i, idx) in item" :key="idx">
              <span class="deduction-title">{{
                rules && rules.length > 0 ? rules[index][idx].ruleName : ""
              }}</span>
              <span>{{ i.whetherDeduct == 0 ? "是" : "否" }}</span>
            </li>
          </ul>
        </template>
        <!-- <ul class="remain">
          <template v-for="(item, index) in evaluation.scoreindexList">
            <li :key="index">
              <span class="deduction-title">{{
                rules && rules.length > 0 ? rules[index].ruleName : ""
              }}</span>
              <span>{{ item.whetherDeduct == 0 ? "是" : "否" }}</span>
            </li>
          </template>
        </ul> -->
      </div>
      <div class="deduction-reason-wrap" style="margin: 15px 0 0 53px">
        <label>备注：</label>
        <span>{{
          evaluation.scoreindexList.length > 0
            ? evaluation.scoreindexList[0][0].remark
            : undefined
        }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import { getScore } from "@/api/unit/extract.js";
export default {
  props: ["evaluation"],
  data() {
    return {
      rules: null,
    };
  },
  computed: {
    currentDeductScore() {
      const scoreList = this.evaluation.scoreindexList;
      const newScore = scoreList.reduce((pre, cur) => {
        if (cur.whetherDeduct == 1) {
          return pre + parseInt(cur.deductScore);
        } else {
          return pre;
        }
      }, 0);
      return newScore;
    },
  },
  mounted() {
    getScore().then((res) => {
      // this.rules = res.rows;
      const rules = res.rows
      let firstArr = [];
      let secondArr = [];
      const aggregation = [];
      for(let i in rules) {
        if((i-(-1)%2) == 0) {
          firstArr.push(rules[i]);
          if(firstArr.length == 2) {
            aggregation.push(firstArr);
            firstArr = [];
          }
        } else {
          secondArr.push(rules[i]);
          if(secondArr.length == 2) {
            aggregation.push(secondArr);
            secondArr = [];
          }
        }
      }
      this.rules = aggregation;
      this.evaluation.scoreindexList.forEach((item) => {
        if (item.whetherDeduct === null) {
          item.whetherDeduct = "0";
        }
      });
    });
  },
  created() {
    const timeArr = this.evaluation.createTime.split(":");
    timeArr.splice(timeArr.length - 1, 1);
    const newTime = timeArr.join(":");
    this.evaluation.createTime = newTime;
  },
};
</script>

<style lang="scss">
.score-wrap {
  padding: 15px;
  display: flex;
  flex-direction: column;
  label {
    width: 100px;
    text-align: right;
  }
  .time-wrap {
    display: flex;
    width: 88%;
    justify-content: space-between;
    padding-bottom: 10px;
    .begin-time,
    .end-time {
      display: flex;
      align-items: center;
      ::v-deep .el-input__inner {
        padding: 10px;
      }
    }
  }
  .select-file {
    display: flex;
    padding-bottom: 20px;
    > label {
      width: 100px;
    }
    > .remain {
      width: calc(100% - 100px);
      margin-right: 20px;
    }
  }
  .deduction-wrap {
    display: flex;
    align-items: baseline;
    margin-left: 53px;
    > ul {
      padding-left: 0;
      li {
        list-style: none;
        display: flex;
        padding: 5px 0;
        > .deduction-title {
          width: 100%;
          margin-right: 20px;
        }
      }
    }
  }
  .deduction-reason-wrap {
    display: flex;
    > textarea {
      width: 80%;
    }
  }
}
.must {
  color: red;
  margin-right: 5px;
}
.current-score {
  color: #da0620;
  padding-left: 48px;
  font-size: 18px;
  font-weight: 600;
}
</style>
